<template>
  <div class="login-container fcenter">
    <div class="login-box fcenter" v-show="!pageloading">
      <img class="login-left" src="./img/login_left.png" alt="login" />
      <div class="login-form">
        <div class="login-logo fcenter">
          <img class="login-icon" src="./img/logo.png" alt="" />
          <div class="logo-text">后台管理系统</div>
        </div>
        <LoginForm v-model="pageloading"></LoginForm>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import LoginForm from "./components/LoginForm.vue";
const pageloading = ref(true);
</script>

<style lang="scss">
.login-container {
  height: 100%;
  background-color: #003765;
  background-image: url("./img/login_bg.svg");
  background-size: 100% 100%;
  background-size: cover;
  .login-box {
    position: relative;
    width: 85%;
    height: 75%;
    padding: 0 0.5rem;
    background-color: rgb(32 148 191 / 80%);
    border-radius: 10px;
    .login-left {
      width: min(50%, 640px);
      margin-right: 10%;
    }
    .login-form {
      width: min(400px, 40%);
      padding: max(0.4rem, 30px);
      background-color: #fff;
      border-radius: 0.1rem;
      .login-logo {
        margin-bottom: max(0.2rem, 20px);
        .login-icon {
          height: max(0.35rem, 17px);
          border-radius: 5px;
        }
        .logo-text {
          padding: 0 0 0 0.1rem;
          font-size: max(0.3rem, 15px);
          font-weight: bold;
          color: #34495e;
          white-space: nowrap;
        }
      }
    }
  }
}

@media screen and (width <= 1250px) {
  .login-container {
    .login-left {
      display: none;
    }
    .login-box {
      width: auto;
      height: auto;
      padding: 3px;
      .login-form {
        width: 100%;
      }
    }
  }
}
</style>
